<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加订单</title>
    <script src="../lib/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../lib/elementui-index.js"></script>
    <script src="../lib/axios.min.js"></script>
    <script src="../lib/token.js"></script>
</head>
<body>
    <div id="app">
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
 
            <el-form-item label="装箱编号">
                <el-input v-model="form.boxid" style="width: 30%;"></el-input>
            </el-form-item>
            <el-form-item label="装箱时间">
                    <div class="block"> 
                        <el-date-picker
                            v-model="form.itime"
                            type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </div>
            </el-form-item>
            <el-form-item label="组装编号">
                <!-- <el-input v-model="form.anums"></el-input> -->
                <!-- <template>
                    <div>
                      <el-transfer
                        style="text-align: left; display: inline-block"
                        v-model="value4"
                        filterable
                        :titles="['Source', 'Target']"
                        :button-texts="['到左边', '到右边']"
                        :format="{
                          noChecked: '${total}',
                          hasChecked: '${checked}/${total}'
                        }"
                        @change="handleChange"
                        :data="data">
                        <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
                        <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
                        <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
                      </el-transfer>
                    </div>
                  </template> -->
                  <template>
                    <el-select v-model="form.nums" multiple placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.anum"
                        :label="item.anum"
                        :value="item.anum">
                      </el-option>
                    </el-select>
                  
                  </template>
            </el-form-item>
        
            <el-form-item>
              <el-button type="primary" @click="addInbox()">添加</el-button>
            </el-form-item>
        </el-form>
    </div>

    <script>
        new Vue({
            el:"#app",
            data() {
                var checkOamount = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('产品合同数不能为空'));
                    }
                    if (!(/(^[1-9]\d*$)/.test(value))) {
                        callback(new Error('请输入正整数'));
                    }else{
                        if(value <= 0){
                            callback(new Error("产品合同数需要大于0"))
                        }else{
                            callback()
                        }
                    }
                };
                var checkOoid = (rule, value, callback) => {
                    if (!value) {
                        this.result.message = ''
                        this.result.message2 = ""
                        return callback(new Error('合同编号数不能为空'));

                    }
                    if (!(/(^[1-9]\d*$)/.test(value))) {
                        this.result.message = ''
                        this.result.message2 = ""
                        callback(new Error('请输入数字值'));

                    }else{
                        // 判断ooids是否重复
                        //axios.get()
                        this.queryCount()
                    }
                };
                return {
                    data: [],
                    value: [1],
                    value4: [1],
                    renderFunc(h, option) {
                        return '<span>{ option.anum } - { option.anum }</span>';
                    },
                    form: { 
                        boxid:'',
                        itime:"",
                        nums:'' 
                    },
                    customer:{
                        cname:'',
                        cuser:'',
                        ctel:'',
                        cperson:'',
                        caddr:''
                    },
                    result:{
                        message:'',
                        message2:''
                    },
                    color:'',
                    rules: {
                        ooid: [
                            { validator: checkOoid, trigger: 'blur' }
                        ],
                        oamount: [
                            { validator: checkOamount, trigger: 'blur' }
                        ],
                    },
                    options:[],
                    value1:[]
                }
            },
            methods: {
                addInbox(){
                    console.log(this.form)
                    axios.post(`http://localhost:8001/production/inbox/addInbox`,this.form)
                    .then(res =>{
                        //console.log()
                        if(res.data.code === 20000){
                            this.$message.success("添加成功")
                        }else{
                            this.$message.error("添加失败")
                        }
                    })
                    
                },
                queryCount(){
                    if(this.form.ooid !== ''){
                        axios.get(`http://localhost:8002/orders/queryCount?ooid=${this.form.ooid}`)
                        .then(res=>{
                            if(res.data.code == "20000"){
                                this.result.message2 = ''
                                this.result.message = "订单编号已存在"
                            }else{
                                this.result.message = ''
                                this.result.message2 = "订单编号可用"
                            }
                        })
                    }else{
                        this.result.message = ''
                        this.result.message2 = ""
                    }
                },
                handleChange(value, direction, movedKeys) {
                    console.log(value, direction, movedKeys);
                },
                // getAssemble(){
                //     let data2 = [];
                //     let data = [];
                //     axios.get(`http://localhost:8002/assemble/findByState`)
                //     .then(res => {
                //         data2 = res.data
                //         for (let i = 0; i < data2.length; i++) {
                //             this.data.push({
                //                 key: i+1,
                //                 label: data2[i].anum,
                //             });
                //         }
                //     })
                // },
                getAssemble(){
                    axios.get(`http://localhost:8001/production/assemble/findByState`)
                    .then(res => {
                        this.options = res.data
                    })
                }
            },
            created(){
                this.getAssemble();
            }
        })
    </script>
</body>
</html>